<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
Object obj=request.getSession().getAttribute("role_resource");
if(null==obj){
	response.setStatus(1000);
	return;
}
%> 
		<script type="text/javascript">
	function show_img(path) {
		var win=Ext.getCmp("showimages");
		win.show();
		var html="<img id='imgpage' width="+win.getInnerWidth()+" height="+win.getInnerHeight()+" src='download.action?id="+encodeURI(path)+"' />";
		win.update(html);
    };				
	
	var img_index = 0;

	var opr_type="";//操作标示
	
	var prod_opera;//传给ajax url属性的action字符串
	
	//状态
	var state_store = new Ext.data.JsonStore( {
		fields : ["id", "text"],
		data:[{id:"0",text:"退回"},{id:"1",text:"启用"},{id:"2",text:"草稿"},{id:"3",text:"审核中"}]
	});
	//状态
	var state_store1 = new Ext.data.JsonStore( {
		fields : ["id", "text"],
		data:[{id:"",text:"全部"},{id:"0",text:"退回"},{id:"1",text:"启用"},{id:"2",text:"草稿"},{id:"3",text:"审核中"}]
	});
	//区域类型
	var araetype_store = new Ext.data.JsonStore( {
		fields : ["id", "text"],
		data:[{id:"1",text:"图片"},{id:"2",text:"文本"},{id:"3",text:"列表"},{id:"4",text:"自动填充"}]
	});
	//卡类型下拉列表store
		var type_store= new Ext.data.JsonStore( {
		fields : ["id", "text"],
		data:[{id:"1",text:"纸质"},{id:"2",text:"电子"}]
	}); 
	var type_store1= new Ext.data.JsonStore( {
		fields : ["id", "text"],
		data:[{id:"",text:"全部"},{id:"1",text:"纸质"},{id:"2",text:"电子"}]
	}); 
	//p1 gridpanel
	var p1_store = new Ext.data.JsonStore( {
		root : "data",
		totalProperty : "total",
		fields : [ "cardid", "cardname", "id","name","state","version","type","images","areano"],
		url : "template!list.action"
	});
	//图片路径,上传
	var image_store=new Ext.data.JsonStore({
		root : "data",
		fields : [ "path" ],
		url : "template!queryImage.action"
	});
	var image_record = Ext.data.Record.create([
		"path"
	]);
	//个性化区域
	var area_store=new Ext.data.JsonStore( {
		root : "data",
		totalProperty : "total",
		fields : ["id","name", "type","tempno","version","remark"],
		url:"templatearea!list.action"
	}); 
	//编辑框record	
	var rule_record = Ext.data.Record.create(
	["id","name", "type","remark"]
	);
	//‘详细’按钮跳转
	minute = function(rowIndex){
		opr_type = "detail";
		var record = p1_store.getAt(rowIndex);
		if (record) {
			var data = record.data;
			var me = Ext.getCmp("areaform");
			area_store.load({params:{"temparea.tempno":data.id}});
			me.getComponent("id").setValue(data.id);
			me.getComponent("name").setValue(data.name);
			me.getComponent("version").setValue(data.version);
			me.getComponent("type").setValue(data.type);
			me.getComponent("areano").setValue(data.areano);
			me.getComponent("cardid").setValue(data.cardid);
			me.getComponent("cardname").setValue(data.cardname);
			me.getComponent("state").setValue(data.state);	
			
			image_store.load({
				params : {
					"template.id" : record.data.id
				},
				callback:function(){
					var win=Ext.getCmp("imagePanel");
					win.show();
					img_index = 0;
					var page_num = "1/"+image_store.getCount();
                	Ext.getCmp("show_num").setText(page_num);
					
					var html="<a href=javascript:show_img('"+encodeURI(this.getAt(0).get('path'))+"');>"+
					"<img width="+win.getInnerWidth()+" height="+win.getInnerHeight()+" src='download.action?id="+encodeURI(this.getAt(0).get('path'))+"'/></a>";
					win.update(html);
				}
			});
			Ext.getCmp("templ_panel").layout.setActiveItem(1);
			
		}
	};

	//显示模板总体信息
	var p1 = {
		id : "p1Grid",
		xtype: "grid",
		stripeRows:true,
		loadMask : true,//在加载数据时遮罩住元素,替换元素Updater的加载提示器，并且在初始化加载之后销毁
		boxMinHeight : 300,
		autoExpandColumn:"name",//自动填充
		autoExpandMin : 100,//自动填充最小宽度
		store :p1_store,
		headersDisabled: true,
		columns : [ new Ext.grid.RowNumberer( {header : "序号",width:35}), 
		            {dataIndex : "id",header : "模板编号",menuDisabled: true},
		            {dataIndex : "name",header : "模板名称",id:"name",menuDisabled: true},
		            {dataIndex : "version",header : "模板版本号",menuDisabled: true},
		            {dataIndex : "cardname",header : "卡产品名称",menuDisabled: true},
		            {dataIndex : "type",header : "账单类型",menuDisabled: true,
			          renderer:function(input){
			             if(""==input)return input;
            			 var res2=type_store.getById(input);
						 return res2.data.text;
            		  }
		            },      
		            {dataIndex:"areano",header:"区域个数",menuDisabled: true},            
		            {dataIndex :"state",header:"状态",menuDisabled: true,
			          renderer:function(input){
   						 if(""==input)return input;
            			 var res2=state_store.getById(input);
						 return res2.data.text;
            		  }
		            },
   					{
   						xtype:"actioncolumn",
   						header: "详细",
   						width:34,
   						id:"detail",
   						items:[{
		                    icon:"images/shared/icons/fam/information.png",  // Use a URL in the icon config
		                    tooltip:"详细",
		                    handler: function(grid, rowIndex, colIndex) {
								new minute(rowIndex,1);
		                    }
		                }]
   					}
		],
		//查询条件
		tbar:["&nbsp&nbsp账单类型:",
			  {xtype:"billCombox",width:120,store:type_store1,text:"查询条件",id:"selcbut",value: "",listeners:{
	         "select": function(comb,rcord,index){
	         	var node = Ext.getCmp("template_tree").getSelectionModel().getSelectedNode();
	         	if(node){
	         		if(node.isLeaf()){
	         			p1_store.baseParams['template.type'] = rcord.data.id;
	         			p1_store.load({params :{start:0,limit:limit}});
				    }
		        }else{
		        	//Ext.Msg.alert("提示","未选中任何行卡产品信息,无法执行查询 操作!");
		        	Ext.Msg.show({
							title:"警告",
							msg: "没有选中任何行卡产品，无法进行查询操作!",
							buttons: Ext.Msg.OK,
							animEl: "elId",
							icon:Ext.MessageBox.WARNING
							});
		        }
	         }
	    	}
			},"&nbsp状态:",
					  {
						xtype : "billCombox",
						width : 120,
						store : state_store1,
						id : "selcstatebut",
						value: "",
						listeners : {
							"select" : function(comb, rcord, index) {
								var node = Ext.getCmp("template_tree").getSelectionModel().getSelectedNode();
								if (node) {
									if (node.isLeaf()) {
										p1_store.baseParams["template.state"] = rcord.data.id;
										p1_store.load({params : {start : 0,limit : limit}});
									}
								} else {
									//Ext.Msg.alert("提示", "未选中任何行卡产品信息,无法执行此操作!");
									Ext.Msg.show({
			   							title:"警告",
			   							msg: "未选中任何行信息,无法进行此操作!",
			   							buttons: Ext.Msg.OK,
			   							animEl: "elId",
			   							icon:Ext.MessageBox.WARNING
								});
								}
							}
						}
				},"&nbsp&nbsp模板名称:",
					  {
						xtype : "textfield",
						id : "selcsnamebut",
						enableKeyEvents:true,
						listeners : {
							keypress:function(t,e){
								 if(13==e.getKey()){
									var node = Ext.getCmp("template_tree").getSelectionModel().getSelectedNode();
									if (node) {
										if (node.isLeaf()) {
											p1_store.baseParams["template.name"] = t.getValue();
											p1_store.load({params : {start : 0,limit : limit}});
										}
									} else {
										//Ext.Msg.alert("提示", "未选中任何行卡产品信息,无法执行此操作!");
										Ext.Msg.show({
				   							title:"警告",
				   							msg: "未选中任何行信息,无法进行此操作!",
				   							buttons: Ext.Msg.OK,
				   							animEl: "elId",
				   							icon:Ext.MessageBox.WARNING
									});
									}
								 }
							}
						}
				} ],
		//分页工具
		bbar : new Ext.ux.PagingToolbar( {
			id:"toolview",
			pageSize : limit,
			store : p1_store
		})
		};

	//单条模板信息显示
	var p2 = {
		id:"areaform",
		columnWidth: 1,	
		labelWidth: 75,	
		height: 221,	
		xtype :"form",
		title:"模板基本信息",			
		bodyStyle : "padding:5px 5px 0",
		defaultType : "textfield",
		items : [
			{id:"id",fieldLabel : "模板编号",anchor:"100%",disabled:true},
			{id:"name",fieldLabel: "模板名称",anchor:"100%",disabled:true},
			{id:"version",fieldLabel:"版本号",anchor:"100%",disabled:true},
			{id:"type",fieldLabel : "账单类型",anchor:"100%",xtype:"billCombox",store:type_store,disabled:true},
			{id:"areano",fieldLabel:"区域个数",anchor:"100%",disabled:true},
			{id:"cardid",fieldLabel : "卡产品编号",anchor:"100%",hidden:true},
			{id:"cardname",fieldLabel : "卡产品名称",anchor:"100%",disabled:true},
			{id:"state",fieldLabel : "状态",anchor:"100%",xtype:"billCombox",store:state_store,disabled:true}
		]
	};


//详细显示图片区域
	var p3 = {id:"view3",
			width:200,	
			xtype:"panel",
			title:"个性化区域图片",
			id:"imagePanel",
			store:image_store,
			height: 221,	
			bbar:new Ext.Toolbar({
				buttonAlign:"center",
				items:[{
                icon:"images/shared/icons/fam/collapse.gif",  // Use a URL in the icon config
                tooltip:"上一张",
                handler: function() {
                	if(img_index==0){
                		img_index = image_store.getCount();
                	}
                	img_index -= 1;
                	var page_num = (img_index+1)+"/"+image_store.getCount();
                	Ext.getCmp("show_num").setText(page_num);
					var rec = image_store.getAt(img_index);
					var win=Ext.getCmp("imagePanel");
					win.show();
					var html="<a href=javascript:show_img('"+encodeURI(rec.get('path'))+"');>"+
						"<img width="+win.getInnerWidth()+" height="+win.getInnerHeight()+" src='download.action?id="+encodeURI(rec.get('path'))+"'/></a>";
					win.update(html);
                }
            },{id:"show_num",xtype:"tbtext"},{
                icon:"images/shared/icons/fam/expand.gif",  // Use a URL in the icon config
                tooltip:"下一张",
                handler: function() {
					if(img_index==image_store.getCount()-1){
                		img_index = -1;
                	}
                	img_index += 1;
                	var page_num = (img_index+1)+"/"+image_store.getCount();
                	Ext.getCmp("show_num").setText(page_num);
					var rec = image_store.getAt(img_index);
					var win=Ext.getCmp("imagePanel");
					win.show();
					var html="<a href=javascript:show_img('"+encodeURI(rec.get('path'))+"');>"+
					"<img width="+win.getInnerWidth()+" height="+win.getInnerHeight()+" src='download.action?id="+encodeURI(rec.get('path'))+"'/></a>";
					win.update(html);
				}
			}]
			
			})
			
		};

//区域基本信息
	var p4 = {
			xtype:"grid",
			id:"edit_grid",
			region: "center",
			enableColumnMove:false,
			enableHdMenu:false,
			title:"个性化区域信息",
			loadMask : true,
			autoExpandColumn:"area_remark",//自动填充
			autoExpandMin : 100,//自动填充最小宽度
			selModel:new Ext.grid.RowSelectionModel(),//设置为行选择器
			store :area_store,
			columns : [new Ext.grid.RowNumberer( 
						{header : "序号",width : 35}),
						{dataIndex :"id",header:"区域编号"},
			            {dataIndex :"name",header:"区域名称"},
			            {dataIndex :"type",header:"区域类型",
				            editor:{xtype:"billCombox",store:araetype_store,id:"area_type"},
					          renderer:function(input){
					             if(""==input)return input;
		            			 var res2=araetype_store.getById(input);
								 return res2.data.text;
		            		  }
			            },
			            {dataIndex :"remark",header:"备注",id:"area_remark"}
	         ]
		};
	
	//查询排版
	var p5 = new Ext.Panel({
		id:"view5",
		autowidth:true,
		boxMinHeight : 438,
		layout:"border",
		border:false,
		items:[
		{
		region: "north",
		height: 220,
		layout:"column",
		border:false,
		items:[p3,p2]},
		p4],
		buttonAlign : "center",
		buttons : [{
					text : "返回",
					handler : function(){
						Ext.getCmp("templ_panel").layout.setActiveItem(0);
					}
				}]
	});

	
	var template_pel = new Ext.Panel( {
		id:"master_panel",
		border : false, 
		layout: "border",
		items:[{
			id:"template_tree",
			boxMinHeight : 300,//最小高度
			xtype : "billTreePanel",
			dataUrl : "tree!product.action",
			root : new Ext.tree.AsyncTreeNode( {
				id : "root",
				expanded : true // 自动展开节点
					}),
			listeners : {
				"click"	: function(node) {
					//只有最子节点才是产品,否则禁止操作
				    if(node.isLeaf()){
						Ext.getCmp("selcbut").setValue("");//清空查询条件
						Ext.getCmp("selcstatebut").setValue("");//清空查询条件
						Ext.getCmp("selcsnamebut").setValue("");//清空查询条件
						
						p1_store.baseParams = {};
			    		p1_store.baseParams['template.cardid'] = node.id;
			    		p1_store.load({params:{start : 0,limit : limit}});
						Ext.getCmp("templ_panel").layout.setActiveItem(0); //显示p1
						
				    }
				}
			}
		}, {
			id:"templ_panel",
			region: "center",
			border : false, 
			layout:"card",
			activeItem:0,//显示第一个容器
			autoScroll :true,
			items: [p1,p5],
			listeners:{
			}					
		} ]
	});

	var CenterPanel=Ext.getCmp("CenterPanel");
	CenterPanel.removeAll();
	CenterPanel.add(template_pel);
	CenterPanel.doLayout();
</script>